import styles from './index.less';
import classNames from 'classnames';

import { InboxOutlined } from '@ant-design/icons';

import { Table, Tooltip, Divider, Input, Select, Popconfirm, Button, Form, Upload, message, Pagination } from 'antd';
import React, { useRef, useEffect, useState } from 'react';
import { FileModelState, Link, useDispatch, useSelector } from 'umi';
import CommonFooter from '@/components/commonFooter';
import { formatting } from '@/utils';

export default function IndexPage() {
  //图片上传
  const { Dragger } = Upload;
  let head = JSON.parse(localStorage.getItem("header") as string)
  const props = {
    name: 'file',
    multiple: true,
    headers: {
      Authorization: head
    },
    action: 'https://creationapi.shbwyz.com/api/file/upload?unique=0',
    onChange(info: { file: { name?: any; status?: any }; fileList: any }) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
    onDrop(e: { dataTransfer: { files: any } }) {
      console.log('Dropped files', e.dataTransfer.files);
    },
  };
  //搜索
  const names: any = useRef<HTMLInputElement>(null)
  const dispatch = useDispatch()
  const { fileList, fileLength } = useSelector((state: { file: FileModelState }) => state.file);
  console.log(fileList);
  useEffect(() => {
    dispatch({
      type: "file/getFileList"

    })
  }, [])




  return (
    <div className={styles.layout_Content}>
      <header>
        <div className={styles.breadcrumb}>
          <span>
            <span>
              <Link to={'/'}>工作台</Link>
            </span>
            <span className={styles.breadcrumb_Separator}>/</span>
          </span>
          <span>
            <span>
              <Link to={'/poster'}>文件管理</Link>
            </span>
            <span className={styles.breadcrumb_Separator}>/</span>
          </span>
        </div>
        <div style={{ margin: '12px 0 0', color: 'red' }}></div>
      </header>
      <div className={styles.fileOss}>
        <Dragger {...props}>
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
          <p className="ant-upload-hint">文件将上传到oss，如未配置请先配置</p>
        </Dragger>
      </div>
      <main>
        <div>
          <Form
            layout="inline"
            className={styles.form_controls}
          >
            <div className={classNames(styles.ant_row, styles.top)}>
              <Form.Item label="文件名称" name="Thetitle" labelCol={{ offset: 5 }}>
                <Input
                  style={{ width: '254px', padding: ' 4px 11px' }}
                  placeholder="请输入文件名称"
                  ref={names}
                />
              </Form.Item>
              <Form.Item label="文件类型" name="Thetitle" labelCol={{ offset: 5 }}>
                <Input
                  style={{ width: '254px', padding: ' 4px 11px' }}
                  placeholder="请输入文件类型"
                  ref={names}
                />
              </Form.Item>
            </div>
            <div className={classNames(styles.ant_row, styles.top)}>
              <div className={styles.ant_btn}>
                <Button type="primary" onClick={() => {
                  console.log(names.current.input.value);
                  let values = names.current.input.value
                  if (values) {
                    dispatch({
                      type: 'file/getFileSearch',
                      payload: {
                        page: 1,
                        pageSize: 12,
                        name: values
                      },
                    });
                  } else {
                    dispatch({
                      type: 'file/getFileSearch',

                    })
                  }

                }}>搜索</Button>
                <Button style={{ margin: '0 8px' }}>重置</Button>
              </div>
            </div>
          </Form>

          <div className={styles.box}>
            {
              fileList.map((item: { originalname: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; url: string | undefined; filename: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; }) => {
                return <div className={styles.boxs}>
                  <img src={item.url} alt="" />
                  <p>{item.originalname}</p>
                  <p>上传于{item.createAt}</p>

                </div>
              })
            }
            <Table
              pagination={{
                total: fileLength,
                showTotal: total => `共${total}条`,
                showSizeChanger: true,
                pageSizeOptions: [8, 12, 24, 36],
                pageSize: 12,
                defaultCurrent: 1,
              }}
            />

          </div>

        </div>



      </main>

      <div>
        <CommonFooter></CommonFooter>
      </div>
    </div>
  );
}

